const MAX_V = 1; // 最大书写速度
const MIN_V = 0; // 最小书写速度
const MAX_LINE_WIDTH = 16; // 最大笔画宽度
const MIN_LINE_WIDTH = 4; // 最小笔画宽度
const MAX_LINE_DIFF = .03; // 两点之间笔画宽度最大差异
let context = null; // canvas上下文
let lastPoint = null; // 包含上一点笔画信息的对象
let canvas = null; // 全局 canvas 对象
Page({

    /**
     * 页面的初始数据
     */
    data: {
      drawn: false,
    },
  
    saveSignature:function(e){
        wx.showToast({
          title: '提交成功',
        })
        // wx.navigateBack({
        //   delta: 1 // 返回上一级页面
        // });
    },
    onShow: function (options) {
      this.canvasInit();
    },
    canvasInit: function () {
      wx.createSelectorQuery() 
      .select('#signature-board') // 在 WXML 中填入的 id
      .fields({ node: true, size: true })
      .exec((res) => {
        res[0].node.width = res[0].width;
        res[0].node.height = res[0].height;
          context = res[0].node.getContext("2d")
      })
    },
    onLoad(options){
    },
    canvasMove: function (e) {
      this.setData({
        drawn: true
      })
      let currPoint = {
        x: e.changedTouches[0].x, // X坐标
        y: e.changedTouches[0].y, // Y坐标
        t: new Date().getTime(), // 当前时间
        w: (MAX_LINE_WIDTH + MIN_LINE_WIDTH) / 2 /*默认宽度 */
      };
      if (lastPoint) {
        currPoint.w = this.calcLineWidth(currPoint); // 重新赋值宽度，覆盖默认值 
        context.beginPath();
        context.strokeStyle = '#000';
        context.lineCap = 'round';
        context.lineJoin = 'round';
        context.lineWidth = currPoint.w;
        context.moveTo(lastPoint.x, lastPoint.y);
        context.lineTo(currPoint.x, currPoint.y);
        context.stroke();
      }
      lastPoint = currPoint; // 结束前保存当前点为上一点
    },
    // 计算当前点的宽度，书写速度越快，笔画宽度越小，呈现出笔锋的感觉（笑）
    calcLineWidth: function (currPoint) {
      let consuming = currPoint.t - lastPoint.t; // 两点之间耗时
      if (!consuming) return lastPoint.w; // 如果当前点用时为0，返回上点的宽度。
      let maxWidth = Math.min(MAX_LINE_WIDTH, lastPoint.w * (1 + MAX_LINE_DIFF)); // 当前点的最大宽度
      let minWidth = Math.max(MIN_LINE_WIDTH, lastPoint.w * (1 - MAX_LINE_DIFF * 3)); // 当前点的最小宽度，变细时速度快所以宽度变化要稍快
      let distance = Math.sqrt(Math.pow(currPoint.x - lastPoint.x, 2) + Math.pow(currPoint.y - lastPoint.y, 2)); // 两点之间距离
      let speed = Math.max(Math.min(distance / consuming, MAX_V), MIN_V); /*当前点速度*/
      let lineWidth = Math.max(Math.min(MAX_LINE_WIDTH * (1 - speed / MAX_V), maxWidth), minWidth); /* 当前点宽度 */
      return lineWidth;
    },
    canvasEnd: function (e) {
      lastPoint = null; // 每笔画完清除缓存
    },
    canvasClear: function () {
      this.setData({
        drawn: false
      })
      context.clearRect(0, 0, context.canvas.width, context.canvas.height);
      // context.draw(false);
    },
    canvasOut: function () {
      wx.navigateBack({
        delta: 1,
      })
    },
    finish: function () {
      if (!this.data.drawn) {
        return;
      }
    //由于新版的canvas的wx.canvasToTempFilePath方法一直报错，只能通过以下方式来获取签名图片
      const res = context.canvas.toDataURL("image/png");
      const fsm = wx.getFileSystemManager();
      const FILE_BASE_NAME = "tmp_base64src_" + new Date().getTime();
      const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.png`;
      console.log('filepath',filePath)
      fsm.writeFile({
        filePath,
        data: res.replace(/^data:image\/\w+;base64,/, ""),
        encoding: "base64",
        success: () => {
          console.log('成功')
          wx.setStorageSync('signature', filePath);
            // this.getOpenerEventChannel().emit('signature', filePath); //传签名图片的临时路径回上一页
            wx.navigateBack();
        },
        fail() {
          wx.showToast({ title: "生成签名失败", icon: "none" });
        },
      });
    },
    
    handleBack(){
      wx.navigateBack({
        delta: 1 // 返回上一级页面
      });
    }
  })